<!--
  Generated template for the AccountPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>账户余额</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <ion-grid class="balance-grid">
    <ion-row>
      <ion-col col-12 text-center>
         <p class="balance-title">
           账户余额
         </p>
         <p class="balance-digital">
          {{user.userInfo.balance}}元
         </p>
         <button ion-button outline (click)="skipToChargingForAccount()">立即充值</button>
      </ion-col>
      <!-- <ion-col col-6 text-center>
         <p class="balance-title">
           本地余额
         </p>
         <p class="balance-digital">
          {{user.userInfo.local_balance}}元
         </p>
         <button ion-button outline (click)="turnMoney()">转到本地余额</button>
      </ion-col> -->
    </ion-row>
  </ion-grid>
  <h5 class="list-title">账户明细</h5>
  <ion-grid class="list-grid">
    
    <ion-row align-items-center *ngFor="let data of detailedInfo"> 
      <ion-col col-6 class="reason">{{getTables(data.tables)}}</ion-col>
      <ion-col col-6 text-right>
        <p class="money" *ngIf="getTables(data.tables)!='转出'&&getTables(data.tables)!='消费'">
         +{{data.moneys}}元
        </p>
        <p class="money" *ngIf="getTables(data.tables)=='转出'">
          -{{data.moneys}}元
         </p>
         <p class="money" *ngIf="getTables(data.tables)=='消费'">
          -{{data.moneys}}元
         </p>
        <p class="date">
          <span class="ymd">{{(data.created_at ? data.created_at : 1522058400*1000) | date:"yyyy/MM/dd/HH:mm:ss"}}</span>
          <!-- <p class="date">{{(data.created_at ? data.created_at : 1522058400*1000) | date:"yyyy/MM/dd/HH:mm:ss"}}</p> -->
        </p>
      </ion-col>
    </ion-row>
    
    <ion-thumbnail *ngIf="nodata === 1">
      <p class="font-home">没有更多了~</p>
    </ion-thumbnail>
    <ion-thumbnail *ngIf="nodata !== 1" (click)="lodeMessage($event,'text')">
      <p class="font-home">下拉加载</p>
    </ion-thumbnail>
    
     <!-- <ion-row align-items-center>
      <ion-col col-6 class="reason">充值</ion-col>
      <ion-col col-6 text-right>
        <p class="money">
          5.00
        </p>
        <p class="date">
          <span class="ymd">2018-03-03</span><span>14:05:06</span>
        </p>
      </ion-col>
    </ion-row>  -->
  <!--
    <ion-row align-items-center>
      <ion-col col-6 class="reason">转出</ion-col>
      <ion-col col-6 text-right>
        <p class="money">
          -1.50
        </p>
        <p class="date">
          <span class="ymd">2018-03-03</span><span>14:05:06</span>
        </p>
      </ion-col>
    </ion-row>

    <ion-row align-items-center>
      <ion-col col-6 class="reason">退款</ion-col>
      <ion-col col-6 text-right>
        <p class="money">
          5.00
        </p>
        <p class="date">
          <span class="ymd">2018-03-03</span><span>14:05:06</span>
        </p>
      </ion-col>
    </ion-row>

    <ion-row align-items-center>
      <ion-col col-6 class="reason">消费</ion-col>
      <ion-col col-6 text-right>
        <p class="money">
          -2.00
        </p>
        <p class="date">
          <span class="ymd">2018-03-03</span><span>14:05:06</span>
        </p>
      </ion-col>
    </ion-row>

    <ion-row align-items-center>
      <ion-col col-6 class="reason">充值</ion-col>
      <ion-col col-6 text-right>
        <p class="money">
          5.00
        </p>
        <p class="date">
          <span class="ymd">2018-03-03</span><span>14:05:06</span>
        </p>
      </ion-col>
    </ion-row>

    <ion-row align-items-center>
      <ion-col col-6 class="reason">退款</ion-col>
      <ion-col col-6 text-right>
        <p class="money">
          5.00
        </p>
        <p class="date">
          <span class="ymd">2018-03-03</span><span>14:05:06</span>
        </p>
      </ion-col>
    </ion-row> -->
  </ion-grid>
  <ion-infinite-scroll *ngIf="nodata !== 1" (ionInfinite)="lodeMessage($event,'scroll')">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
  